<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>

.header {
 	height:200px;
	width:200px;
	position:absolute;
}

.toolbox-top{
	background-image:url(../img/tab_bg_new.png);
}


.caption{
	color:			#466F93;
	font-weight:	bold;
	font-family:	verdana,arial,sans serif;
	line-height:	16px;
	font-size:		11px;

}
.treeview {
	list-style-type:none;
	display:inline;
}

.treeview ul {
	margin: 0;
	padding: 0;
}

.treeview li {
	list-style-type: none;
    padding-left: 20px;
    margin-bottom: 0px;
    color: #466F93;
    font-weight: bold;
    font-family: verdana, arial, sans serif;
    line-height: 16px;
    font-size: 13px;

	background-repeat:no-repeat;
	
}

.itemselected{
	background-position:bottom;
	background-color:#DBE1D3;
}


.itemselect{
	cursor:pointer;
}

.toolbox-item {
    color: #466F93;
    font-weight: bold;
    font-family: verdana, arial, sans serif;
    line-height: 16px;
    font-size: 13px;
	cursor:pointer;	
}
.caption{
	color:			#466F93;
	font-weight:	bold;
	font-family:	verdana,arial,sans serif;
	line-height:	16px;
	font-size:		11px;

}

</style>

</head>

<body>

<div class="header">
  <table width="100%" border="1" cellpadding="2" cellspacing="2" style="border:hidden" >
    <tr>
      <th class="toolbox-top" scope="col"><font class="caption">Toolbox</font></th>
    </tr>
    <tr>
      <td style="background-color:#E3E5E7">&nbsp;
	  		<img src="../img/search.gif"  class="itemselect" />&nbsp;
			<input type="text" style="width:100px; height:13px;" name="filterComponent"/>
			<img src="../img/expandall.gif" class="itemselect"/>&nbsp;<img src="../img/collapseall.gif" class="itemselect"/>	 
		</td>
    </tr>
    <tr>
      <td>
			<div id="toolbox" class style="height:200px; overflow:auto">
					<table id="components" width="100%">
						<tr><td  id="panel" class="toolbox-item"><img src="../img/application_osx.gif"/>  Panel </td></tr>
						<tr><td  id="treeview" class="toolbox-item"><img src="../img/chart_organisation.gif"/>  Treeview</td></tr>
					</table>
				</div>
			 </td>
			</tr>
		  </table>
		</div>

<script>
	var rows = document.getElementById("components").getElementsByTagName("td");
	for (var i=0; i < rows.length; i++) {
    	rows[i].parentNode.onclick = function(e){
			alert("Funciona = " + this.getElementsByTagName("td")[0].id);
		}
    	rows[i].parentNode.onmousemove = function(e){
			this.getElementsByTagName("td")[0].style.backgroundColor="#DBE1D3";
		}
    	rows[i].parentNode.onmouseout = function(e){
			this.getElementsByTagName("td")[0].style.backgroundColor="#FFFFFF";
		}
    }

	
</script>

</body>
</html>
